@drawer-prefix: ~"@{css-prefix}-drawer";

.bottomdrawerenter {
	animation-name: bottomdrawerenter;
	animation-duration: 400ms;
	animation-timing-function: ease-in;
}

.bottomdrawerleave {
	animation-name: bottomdrawerleave;
	animation-duration: 300ms;
	animation-timing-function: ease-in;
}

@keyframes bottomdrawerenter {
	0% {
		height: 0;
		transform: translateY(100%);
	}

	100% {
		height: 100%;
		transform: translateY(0);
	}
}

@keyframes bottomdrawerleave {
	0% {
		height: 100%;
		transform: translateY(0);
	}

	100% {
		height: 0;
		transform: translateY(100%);
	}
}

.topdrawerenter {
	animation-name: topdrawerenter;
	animation-duration: 400ms;
	animation-timing-function: ease-in;
}

.topdrawerleave {
	animation-name: topdrawerleave;
	animation-duration: 300ms;
	animation-timing-function: ease-in;
}

@keyframes topdrawerenter {
	0% {
		height: 0;
		transform: translateY(-100%);
	}

	100% {
		height: 100%;
		transform: translateY(0);
	}
}

@keyframes topdrawerleave {
	0% {
		height: 100%;
		transform: translateY(0);
	}

	100% {
		height: 0;
		transform: translateY(-100%);
	}
}

.rightdrawerenter {
	animation-name: rightdrawerenter;
	animation-duration: 400ms;
	animation-timing-function: ease-in;
}

.rightdrawerleave {
	animation-name: rightdrawerleave;
	animation-duration: 300ms;
	animation-timing-function: ease-in;
}

@keyframes rightdrawerenter {
	0% {
		width: 0;
		transform: translateX(100%);
	}

	100% {
		width: 100%;
		transform: translateX(0);
	}
}

@keyframes rightdrawerleave {
	0% {
		width: 100%;
		transform: translateX(0);
	}

	100% {
		width: 0;
		transform: translateX(100%);
	}
}

.leftdrawerenter {
	animation-name: leftdrawerenter;
	animation-duration: 400ms;
	animation-timing-function: ease-in;
}

.leftdrawerleave {
	animation-name: leftdrawerleave;
	animation-duration: 300ms;
	animation-timing-function: ease-in;
}

@keyframes leftdrawerenter {
	0% {
		width: 0;
		transform: translateX(-100%);
	}

	100% {
		width: 100%;
		transform: translateX(0);
	}
}

@keyframes leftdrawerleave {
	0% {
		width: 100%;
		transform: translateX(0);
	}

	100% {
		width: 0;
		transform: translateX(-100%);
	}
}


.@{drawer-prefix} {
	position: fixed;

	&-top {
		top: 0;
		left: 0;
		right: 0;
	}

	&-right {
		top: 0;
		bottom: 0;
		right: 0;
	}

	&-bottom {
		bottom: 0;
		left: 0;
		right: 0;
	}

	&-left {
		top: 0;
		bottom: 0;
		left: 0;
	}

	&-content {
		flex-shrink: 0;
	}

}